<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
  <TITLE>采购计划一览表</TITLE>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <META http-equiv=Content-Language content=zh-cn>
  <META http-equiv=Content-Type content="text/html; charset=gb2312">
  <LINK href="js/style.css" rel=stylesheet>
</HEAD>
<BODY>
<DIV id=overDiv style="Z-INDEX: 1; POSITION: absolute"></DIV>
<CENTER>
  <DIV id="app">
    <FORM name=form action=Project_list_do.asp method=post>
      <INPUT type=hidden value=1 name=p_type>
      <H2><FONT color=#0070c0>未编制询价书一览表</FONT></H2>
      <TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#ffffff border=0>
        <TBODY>
        <TR>
          <TD>
            <TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
              <TBODY>
              <TR bgColor=#ffffff>
                <TD noWrap align=middle>
                  采购计划名称：<INPUT size=10 v-model="searchTitle">&nbsp;&nbsp;
                  物资名称：<INPUT size=10 v-model="searchMaterial">&nbsp;&nbsp; <!-- 物资名称搜索 -->
                  采购类型：
                  <SELECT style="WIDTH: 80px" v-model="searchType">
                    <OPTION value="" selected>全部</OPTION>
                    <OPTION value="C000-1">公开求购</OPTION>
                    <OPTION value="C000-2">定向询价</OPTION>
                  </SELECT>&nbsp;&nbsp;
                  <INPUT type=button @click="performSearch" value=搜索>
                  <INPUT type=button @click="resetSearch" value=重置>
                </TD>
              </TR>
              </TBODY>
            </TABLE>
          </TD>
        </TR>
        </TBODY>
      </TABLE>
      <CENTER>
        <FONT color=#000064>◆&nbsp;</FONT>
        <FONT @click="changePage(1)" :style="{ cursor: currentPage > 1 ? 'pointer' : 'default', color: currentPage > 1 ? '#0000be' : '#ccc' }">首页</FONT>&nbsp;
        <FONT @click="changePage(currentPage - 1)" :style="{ cursor: currentPage > 1 ? 'pointer' : 'default', color: currentPage > 1 ? '#0000be' : '#ccc' }">上一页</FONT>&nbsp;
        <span v-for="page in displayedPages" :key="page">
        <FONT v-if="page === currentPage" color=#ff0000>{{ page }}</FONT>
        <A v-else @click="changePage(page)" href="javascript:void(0);"><FONT color=#0000be>{{ page }}</FONT></A>&nbsp;
        </span>
        <FONT @click="changePage(currentPage + 1)" :style="{ cursor: currentPage < totalPages ? 'pointer' : 'default', color: currentPage < totalPages ? '#0000be' : '#ccc' }">下一页</FONT>&nbsp;
        <FONT @click="changePage(totalPages)" :style="{ cursor: currentPage < totalPages ? 'pointer' : 'default', color: currentPage < totalPages ? '#0000be' : '#ccc' }">尾页</FONT>
        <FONT color=#000064>&nbsp;共 {{ filteredData.length }} 个采购计划 每页10 个采购计划</FONT>
        <FONT color=#000064>&nbsp;页次:<FONT color=blue>{{ currentPage }}</FONT>/{{ totalPages }}页</FONT>
        <FONT color=#000064>&nbsp;◆&nbsp;</FONT>
        <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
          <TBODY>
          <TR>
            <TD>
              <TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
                <TBODY>
                <!-- 表头部分，保持原来的颜色 -->
                <TR class=t1 :style="{ backgroundColor: '#99ccff', color: 'black' }">
                  <TD width="5%" align=middle noWrap>
                    <div align="center">选择</div>
                  </TD>
                  <TD width="5%" align=middle noWrap>
                    <div align="center">序号</div>
                  </TD>
                  <TD width="20%" align=middle noWrap>
                    <div align="center">采购计划名称</div>
                  </TD>
                  <TD width="20%" align=middle noWrap>
                    <div align="center">采购类型</div>
                  </TD>
                  <TD width="20%" align=middle noWrap>
                    <div align="center">采购计划下达时间</div>
                  </TD>
                  <TD width="18%" align=middle noWrap>
                    <div align="center">计划报价截止时间</div>
                  </TD>
                </TR>
                <!-- 数据部分，使用 Vue 动态样式绑定 -->
                <TR
                        class=t2
                        v-for="(item, index) in paginatedData"
                        :key="item.id"
                        :style="{ backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#ffffff' }"
                >
                  <TD align=middle>
                    <div align="center">
                      <INPUT type=radio :value="item.id" v-model="findId" name=p_projno>
                    </div>
                  </TD>
                  <TD>
                    <div align="center">{{ (currentPage - 1) * pageSize + index + 1 }}</div>
                  </TD>
                  <TD>
                    <div align="center">
                      <A href="javascript:void(0);" @click="showRemark(item)">{{ item.stockName }}</A>
                    </div>
                  </TD>
                  <TD>
                    <div align="center">{{ item.stockType === 'C000-1' ? '公开求购' : '定向询价' }}</div>
                  </TD>
                  <TD>
                    <div align="center">{{ formatDate(item.startDate) }}</div>
                  </TD>
                  <TD>
                    <div align="center">{{ formatDate(item.endDate) }}</div>
                  </TD>
                </TR>
                </TBODY>
              </TABLE>
            </TD>
          </TR>
          </TBODY>
        </TABLE>
        <INPUT type=hidden value=1 name=p_listtype>
        <P align=center>
          <INPUT @click="jump" type=button value=编制> <INPUT onClick="javascript:history.back()" type=button value=返回>
        </P>
      </CENTER>
    </FORM>
  </DIV>
</CENTER>
</BODY>
<SCRIPT>
  new Vue({
    el: '#app',
    data() {
      return {
        stockList: [], // 所有采购计划数据
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示的数据条数
        searchTitle: '', // 搜索条件：采购计划名称
        searchMaterial: '', // 搜索条件：物资名称
        searchType: '', // 搜索条件：采购类型
        filteredData: [], // 过滤后的数据
        findId: 0, // 当前选中的采购计划ID
      };
    },
    computed: {
      // 总数据条数
      totalItems() {
        return this.filteredData.length;
      },
      // 总页数
      totalPages() {
        return Math.ceil(this.totalItems / this.pageSize);
      },
      // 当前页的数据
      paginatedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.filteredData.slice(start, end);
      },
      // 显示的页码按钮
      displayedPages() {
        const range = 5; // 显示的页码按钮数量
        let start = Math.max(1, this.currentPage - Math.floor(range / 2));
        let end = Math.min(this.totalPages, start + range - 1);
        if (end - start + 1 < range) {
          start = Math.max(1, end - range + 1);
        }
        const pages = [];
        for (let i = start; i <= end; i++) {
          pages.push(i);
        }
        return pages;
      }
    },
    watch: {
      // 监听 findId 的变化
      findId(newId) {
        this.handleSelectionChange(newId);
      }
    },
    created() {
      this.fetchStockList(); // 页面加载时获取采购计划列表
    },
    methods: {
      showRemark(item) {
        alert(item.remark);  // 弹出当前item的remark
      },
      // 设定一个绑定编制按钮的函数 点击时会将findId值存入session中 并跳转到Enquire_bianzhi.html
      jump(){
        //做判断 判断findId是否为0
        if(this.findId > 0){
          //存储数据
          sessionStorage.setItem('id',this.findId);
          //获取数据
          const value = sessionStorage.getItem('id');
          console.log(value);
          //跳转到Enquire_bianzhi.html页面
          window.location.href='Enquire_bianzhi.html';
        }else {
          alert("请选择用户!!!!")
        }
      },
      // 使用 axios 获取采购计划列表
      fetchStockList() {
        axios.get('/put/getall2')
                .then(response => {
                  this.stockList = response.data.data; // 将获取的数据赋值给 stockList
                  this.filteredData = this.stockList; // 初始化过滤后的数据
                  console.log(this.filteredData);
                })
                .catch(error => {
                  console.error('Error fetching stock list:', error);
                });
      },
      // 格式化日期
      formatDate(date) {
        if (!date) return '';
        const d = new Date(date);
        return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
      },
      // 切换页码
      changePage(page) {
        if (page < 1 || page > this.totalPages) return;
        this.currentPage = page;
      },
      // 执行搜索
      performSearch() {
        this.filteredData = this.stockList.filter(item => {
          // 检查采购计划名称
          const matchesTitle = this.searchTitle ? (item.stockName || '').includes(this.searchTitle) : true;
          // 检查物资名称，确保 materialName 不是 null 或 undefined
          const matchesMaterial = this.searchMaterial ? (item.materialName || '').includes(this.searchMaterial) : true;
          // 检查采购类型
          const matchesType = this.searchType ? item.stockType === this.searchType : true;

          // 确保所有条件同时满足
          return matchesTitle && matchesMaterial && matchesType;
        });
        this.currentPage = 1; // 搜索后重置到第一页
      },
      // 重置搜索条件
      resetSearch() {
        this.searchTitle = '';
        this.searchMaterial = '';
        this.searchType = '';
        this.filteredData = this.stockList; // 重置为全部数据
        this.currentPage = 1; // 重置到第一页
      },
      // 处理选择变化
      handleSelectionChange(id) {
        console.log('Selected ID:', id);
        // 你可以在这里执行其他操作，比如根据ID获取详细信息等
      }
    }
  });
</SCRIPT>
</HTML>